<!--
 * @Author: xiongang 407700216@qq.com
 * @Date: 2022-07-09 16:45:31
 * @LastEditors: cool panda
 * @LastEditTime: 2023-04-25 21:17:28
 * @FilePath: \big-screen-vue-datav\src\views\weather.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="weather-view flex">
    <div class="w-left">
      <div class="w-icon flex">
        <svg-icon icon-class="yin" class="svg"></svg-icon>
        <div class="num"><span>21</span>­°C</div>
        <div class="tianqi">大部分多云</div>
      </div>
      <div class="w-desc flex">
        <div class="w-text-box">
          <div class="text"><span>69</span> %</div>
          <div class="text1">温度</div>
        </div>
        <div class="w-text-box">
          <div class="text"><span>49</span>ug/㎡</div>
          <div class="text1">PM2.5</div>
        </div>
      </div>
    </div>
    <div class="w-right">
      <div class="top-dec top flex">
        <div class="text">温度</div>
        <div class="text">湿度</div>
        <div class="text">PM2.5</div>
        <div class="text">大气压</div>
      </div>
      <div class="liquidfill-box flex">
        <div v-for="w in weaters" :key="w.id" class="fill-box">
          <liquidfill :unit="w.unit" :color="w.color" :num="w.num"></liquidfill>
        </div>
      </div>
      <div class="top-dec flex">
        <div class="text">达标率<span>18%</span></div>
        <div class="text">达标率<span>28%</span></div>
        <div class="text">达标率<span>68%</span></div>
        <div class="text">达标率<span>8%</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import liquidfill from "../components/echart/liquidfill/index.vue"
export default {
  components: {
    liquidfill,
  },
  data() {
    return {
      weaters: [
        { id: "111", color: "#77d669", unit: "", num: 0.23 },
        { id: "222", color: "#c6743d", unit: "", num: 0.32 },
        { id: "333", color: "#bd4441", unit: "kg/㎡", num: 0.80 },
        { id: "444", color: "#77d669", unit: "mlg/㎡", num: 0.08 },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  flex-shrink: 0;
}
.weather-view {
  opacity: 0;
  height: 80px;
  margin-top: -14px;
  .w-left {
    .w-icon {
      align-items: center;
      .svg {
        width: 30px;
        height: 30px;
      }
      .num {
        span {
          font-size: 26px;
        }
        margin-left: 10px;
        color: #59b3d1;
        font-size: 16px;
        font-style: italic;
        // font-weight: bold;
      }
      .tianqi {
        margin-left: 10px;
        color: #ffffff;
        font-size: 14px;
      }
    }
    .w-desc {
      margin-top: 14px;
      .w-text-box {
        width: 80px;
        color: #59b3d1;
        font-size: 12px;
        .text,
        .text1 {
          text-align: center;
        }
        .text1 {
          color: #ffffff;
        }
        span {
          font-size: 18px;
        }
      }
    }
  }
  .w-right {
    width: 280px;
    margin-left: 20px;
    .liquidfill-box {
      // transform: scale(0.5);
      zoom: 0.5;
      justify-content: space-around;
      .fill-box {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        flex: 1;
      }
    }
    .top-dec {
      &.top {
        align-items: flex-start;
      }
      justify-content: center;
      height: 20px;
      font-size: 12px;
      line-height: 8px;
      align-items: flex-end;
      .text {
        flex: 1;
        text-align: center;
        span{
          color: #59b3d1;
          margin-left: 2px;
        }
      }
    }
  }
}
</style>
